<template>
  <div v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.4)" style="height: 100%;">
    <div class="RightCardTitle">预警对照信息</div>
    <!-- <div class="tableRainwater listTables" style="height: 96%;"> -->
    <div class="tableRainwater listTablesOther">
      <!-- <el-table
        :data="contrastList"
        fit
        style="width: 100%;height: 98%;"
        @row-click="planDetailsRowClick"
      >
        <template slot="empty">
          <span>无数据</span>
        </template>
        <el-table-column prop="ewName" align="center" label="村庄名称" />
        <el-table-column prop="tm" align="center" width="120" label="风险时间">
          <template slot-scope="scope">
            {{ scope.row.tm | dateformat }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="levelNumber" width="65" label="风险 (预演)">
          <template slot-scope="scope">
            <span v-if="scope.row.levelNumber == '1'" class="warningYy1">极危险</span>
            <span v-if="scope.row.levelNumber == '2'" class="warningYy2">危险</span>
            <span v-if="scope.row.levelNumber == '3'" class="warningYy3">警戒</span>
            <span v-if="scope.row.levelNumber == '4'" class="warningYy4">关注</span>
            <span v-if="scope.row.levelNumber == null" class="warningYyNull">无预警</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="levelNumberFx" width="65" label="风险 (预警)">
          <template slot-scope="scope">
            <span v-if="scope.row.levelNumberFx == '1'" class="warningYy1">极危险</span>
            <span v-if="scope.row.levelNumberFx == '2'" class="warningYy2">危险</span>
            <span v-if="scope.row.levelNumberFx == '3'" class="warningYy3">警戒</span>
            <span v-if="scope.row.levelNumberFx == '4'" class="warningYy4">关注</span>
            <span v-if="scope.row.levelNumberFx == null" class="warningYyNull">无预警</span>
          </template>
        </el-table-column>
      </el-table> -->
      <!--  -->
      <div class="tabel_common tabel_commons">
        <div class="table">
          <div class="thead">
            <div class="tr">
              <div class="th"> 村庄名称 </div>
              <div class="th"> 风险时间 </div>
              <div class="th"> 风险 (预演) </div>
              <div class="th"> 风险 (预警) </div>
            </div>
          </div>
          <el-scrollbar style="height:72vh; width: 100%;" class="el_scrollbar">
            <div class="tbody">
              <template v-if="contrastList.length <= 0">
                <div slot="no-results" class="noData" style="background-position: center 90%;padding-top: 95%;">暂无数据</div>
              </template>
              <div v-if="contrastList" class="tr" v-for="dict in contrastList" :key="dict.ewName"
                @click="planDetailsRowClick(dict)">
                <!-- :class="['tr', PionId == dict.id ? 'ta' : '']"> -->
                <div class="td"> 
                  <el-tooltip class="item" effect="dark" :content="dict.ewName" placement="top-start">
                    <span>{{ dict.ewName }}</span>
                  </el-tooltip>  
                </div>
                <div class="td"> {{ dict.tm | dateformat }} </div>
                <!-- <div class="td"> {{ dict.pCount }} </div> -->
                <div class="td">
                  <div class="img" v-show="dict.levelNumber == '1'">
                    <img src="@/assets/yuanimg/sodanger.png" alt="" />
                  </div>
                  <div class="img" v-show="dict.levelNumber == '2'">
                    <img src="@/assets/yuanimg/danger.png" alt="" />
                  </div>
                  <div class="img" v-show="dict.levelNumber == '3'">
                    <img src="@/assets/yuanimg/warning.png" alt="" />
                  </div>
                  <div class="img" v-show="dict.levelNumber == '4'">
                    <img src="@/assets/yuanimg/action.png" alt="" />
                  </div>
                  <div class="img" v-show="dict.levelNumber == null">
                    <img src="@/assets/yuanimg/nowarning.png" alt="" />
                  </div>
                </div>
                <div class="td">
                  <div class="img" v-show="dict.levelNumberFx == '1'">
                    <img src="@/assets/yuanimg/sodanger.png" alt="" />
                  </div>
                  <div class="img" v-show="dict.levelNumberFx == '2'">
                    <img src="@/assets/yuanimg/danger.png" alt="" />
                  </div>
                  <div class="img" v-show="dict.levelNumberFx == '3'">
                    <img src="@/assets/yuanimg/warning.png" alt="" />
                  </div>
                  <div class="img" v-show="dict.levelNumberFx == '4'">
                    <img src="@/assets/yuanimg/action.png" alt="" />
                  </div>
                  <div class="img" v-show="dict.levelNumberFx == null">
                    <img src="@/assets/yuanimg/nowarning.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  GetRehearsalWarning
} from '@/api/xuna.js'
import { initLoad, callUIInteraction, addResponseEventListener } from '@/PixelStreaming/webrtcVideo.js'
export default {
  name: 'Contrastinfo',
  data() {
    return {
      contrastList: [],
      loading: false
    }
  },
  computed: {
    basin() {
      return this.$store.getters.basin
    },
  },
  methods: {
    getGetRehearsalWarning(id) {
      this.loading = true
      GetRehearsalWarning({ id: id }).then((res) => {
        this.loading = false
        this.contrastList = res.data
      }).catch(err => {
        this.loading = false;
      })
    },
    planDetailsRowClick(event) {
      console.log(event)
      var param = {
        "basin": this.basin,
        "code": event.ewCode
      }
      callUIInteraction("Web_ContrastinfoPosition", param);
    }
  }
}
</script>
<style lang="scss" scoped>
.warningYy1,
.warningYy2,
.warningYy3,
.warningYy4,
.warningYyNull {
  width: 100%;
  padding: 2px;
}
</style>
